<template>
  <div class="record-block">
    <el-descriptions
      v-for="(desc, index) in descriptions"
      :key="index"
      class="description"
      :title="desc.title"
      :column="3"
      border
    >
      <template v-if="index === 0" #extra>
        <el-tag
          :type="status.tag"
        >
          {{ status.text }}
        </el-tag>
      </template>
      <el-descriptions-item
        v-for="(item, cIndex) in desc.blocks"
        :key="`${cIndex}-block`"
        :label="item.label"
      >
        <template v-if="item.tag">
          <el-tag
            :type="item.tag"
          >
            {{ item.value }}
          </el-tag>
        </template>

        <template v-else-if="item.img">
          <el-image
            :src="item.img"
            style="width: 60px;height: 60px;"
            :preview-src-list="[item.img]"
          />
        </template>

        <template v-else>
          {{ item.value }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    descriptions: {
      type: Array,
      default: () => []
    },

    status: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.record-block {
  .description {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
